<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>注册</title>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/element.css">
</head>
<!--style="background:url('../../images/bg1.jpg') no-repeat; background-size: cover;"-->
<body>
<script>
    // 可调参数
    var BACKGROUND_COLOR = "rgb(77,72,172)";   // 背景颜色
    var POINT_NUM = 100;                        // 星星数目
    var POINT_COLOR = "rgba(255,255,255,0.7)";  // 点的颜色
    var LINE_LENGTH = 10000;                    // 点之间连线长度(的平方)
    // 创建背景画布
    var cvs = document.createElement("canvas");
    cvs.width = window.innerWidth;
    cvs.height = window.innerHeight;
    cvs.style.cssText = "\
    position:fixed;\
    top:0px;\
    left:0px;\
    z-index:-1;\
    opacity:1.0;\
    ";
    document.body.appendChild(cvs);

    var ctx = cvs.getContext("2d");

    var startTime = new Date().getTime();

    //随机数函数
    function randomInt(min, max) {
        return Math.floor((max - min + 1) * Math.random() + min);
    }

    function randomFloat(min, max) {
        return (max - min) * Math.random() + min;
    }

    //构造点类
    function Point() {
        this.x = randomFloat(0, cvs.width);
        this.y = randomFloat(0, cvs.height);

        var speed = randomFloat(0.3, 1.4);
        var angle = randomFloat(0, 2 * Math.PI);

        this.dx = Math.sin(angle) * speed;
        this.dy = Math.cos(angle) * speed;

        this.r = 1.2;

        this.color = POINT_COLOR;
    }

    Point.prototype.move = function () {
        this.x += this.dx;
        if (this.x < 0) {
            this.x = 0;
            this.dx = -this.dx;
        } else if (this.x > cvs.width) {
            this.x = cvs.width;
            this.dx = -this.dx;
        }
        this.y += this.dy;
        if (this.y < 0) {
            this.y = 0;
            this.dy = -this.dy;
        } else if (this.y > cvs.height) {
            this.y = cvs.height;
            this.dy = -this.dy;
        }
    }

    Point.prototype.draw = function () {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
    }

    var points = [];

    function initPoints(num) {
        for (var i = 0; i < num; ++i) {
            points.push(new Point());
        }
    }

    var p0 = new Point(); //鼠标
    p0.dx = p0.dy = 0;
    var degree = 2.5;
    document.onmousemove = function (ev) {
        p0.x = ev.clientX;
        p0.y = ev.clientY;
    }
    document.onmousedown = function (ev) {
        degree = 5.0;
        p0.x = ev.clientX;
        p0.y = ev.clientY;
    }
    document.onmouseup = function (ev) {
        degree = 2.5;
        p0.x = ev.clientX;
        p0.y = ev.clientY;
    }
    window.onmouseout = function () {
        p0.x = null;
        p0.y = null;
    }

    function drawLine(p1, p2, deg) {
        var dx = p1.x - p2.x;
        var dy = p1.y - p2.y;
        var dis2 = dx * dx + dy * dy;
        if (dis2 < 2 * LINE_LENGTH) {
            if (dis2 > LINE_LENGTH) {
                if (p1 === p0) {
                    p2.x += dx * 0.03;
                    p2.y += dy * 0.03;
                } else return;
            }
            var t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg;
            ctx.strokeStyle = "rgba(255,255,255," + t + ")";
            ctx.beginPath();
            ctx.lineWidth = 1.5;
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.closePath();
            ctx.stroke();
        }
        return;
    }

    //绘制每一帧
    function drawFrame() {
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight;
        ctx.fillStyle = BACKGROUND_COLOR;
        ctx.fillRect(0, 0, cvs.width, cvs.height);

        var arr = (p0.x == null ? points : [p0].concat(points));
        for (var i = 0; i < arr.length; ++i) {
            for (var j = i + 1; j < arr.length; ++j) {
                drawLine(arr[i], arr[j], 1.0);
            }
            arr[i].draw();
            arr[i].move();
        }

        window.requestAnimationFrame(drawFrame);
    }
    initPoints(POINT_NUM);
    drawFrame();
</script>
<div id="wrapper">
    <div style="width: 400px; margin: 120px auto;background-color:rgba(100,149,237,0.5); border-radius: 10px">
        <div style="width: 100%; height: 100px; color: #eee; font-size: 30px;line-height: 100px; text-align: center">欢迎注册</div>
        <div style="margin-top: 25px; width: 100%; height: 500px; text-align: center">
            <input v-model="user.username" type="text" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%" placeholder="请输入账号">
            <input v-model="user.password" type="password" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%; margin-top: 20px" placeholder="请输入密码">
            <input v-model="user.email" type="text" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%;  margin-top: 20px" placeholder="请输入邮箱">
            <input v-model="user.phone" type="text" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%;  margin-top: 20px" placeholder="请输入电话">
            <br>
            <br>
            <input type="radio" value="[2,3]" v-model="user.role" onclick="change_role(1)"> 云工厂管理员
            <input type="radio" value="[2,4]" v-model="user.role" onclick="change_role(2)"> 经销商
            <br>
            <br>
            <input v-model="factory.name" type="text" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%" placeholder="工厂名称" id="factory_name" disabled="disabled">
            <input v-model="factory.description" type="text" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 60%; margin-top: 20px" placeholder="工厂简介" id = "factory_description" disabled = "disabled">
            <button @click="register" style="height: 40px; padding: 10px; width: 60%; margin-top: 25px; background-color: steelblue; color: white">注册</button>
            <div style="margin-top: 25px">
                <a style="width: 60%; text-align: right; display: inline-block; color: #eee" href="login.html">已有账号，去登录</a>
            </div>
        </div>
    </div>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>

<script>
    function change_role(ele){
        let factory_name = $("#factory_name");
        let factory_description = $("#factory_description");
        if(ele === 1){
            factory_name.removeAttr("disabled");
            factory_description.removeAttr("disabled");
        }
        else {
            factory_name.attr("disabled", "disabled");
            factory_description.attr("disabled","disabled");
        }
    }

    var wrapper=new Vue({
        el: "#wrapper",
        data: {
            user: {},
            role:'',
            factory:{}
        },
        methods: {
            register() {
                let regCode = /^[a-zA-z0-9]{5,15}$/;
                let regEmail = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

                if (!this.user.username) {
                    this.$message({
                        message: "请输入用户名",
                        type: "error"
                    });
                    return;
                }
                if (!this.user.password) {
                    this.$message({
                        message: "请输入密码",
                        type: "error"
                    });
                    return;
                }
                if(!regCode.test(this.user.username)){
                    this.$message({
                        message:"账号只能输入大小写字母,数字!长度在5到15位之间!",
                        type:"error"
                    });
                    return;
                }
                if(!regCode.test(this.user.password)){
                    this.$message({
                        message:"密码只能输入大小写字母,数字!长度在5到15位之间!",
                        type:"error"
                    });
                    return;
                }

                if(!regEmail.test(this.user.email)){
                    this.$message({
                        message: "邮箱格式不正确!",
                        type:"error"
                    });
                    return;
                }
                let temp = JSON.stringify(this.user)+"%"+JSON.stringify(this.factory);
                //console.log(JSON.stringify(this.user));
                console.log(JSON.stringify(temp));
                $.ajax({
                    url: "/api/user/register",
                    type: "POST",
                    contentType: "application/json",
                    data: temp,
                    success:function (result){
                        console.log(JSON.stringify(this.user));
                        console.log(JSON.stringify(temp));
                    }
                })
                    .then(res => {
                        if (res.code === '0') {
                            this.$message({
                                message: "注册成功",
                                type: "success"
                            });
                            sessionStorage.setItem("user", JSON.stringify(res.data));
                            setTimeout(() => {
                                location.href= "/page/end/login.html"
                            }, 1000)
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                    })
            }
        }
    })
</script>
</body>
</html>

